<template>
    <div ref="chart" class="chart-render-box"></div>
  </template>
  <script setup>
  import * as echarts from 'echarts'
  import { cloneDeep } from 'lodash'
  import { onMounted, ref, reactive, onBeforeUnmount, watch } from 'vue'
  let myChart = null
  const props = defineProps({
    xData: {
      type: Array,
      default: () => [],
    },
    sData: {
      type: Array,
      default: () => [],
    },
    data1: {
      type: Array,
      default: () => [],
    },
    data2: {
      type: Array,
      default: () => [],
    },
    data3: {
      type: Array,
      default: () => [],
    },
    data: {
      type: Array,
      default: () => [],
    },
  })
  // const echartLegendData = [
  //   {
  //     name: '无旱',
  //     value: '1000',
  //     percentage: '24.39',
  //   },
  //   {
  //     name: '轻旱',
  //     value: '1000',
  //     percentage: '24.39',
  //   },
  //   {
  //     name: '中旱',
  //     value: '1000',
  //     percentage: '24.39',
  //   },
  //   {
  //     name: '重旱',
  //     value: '1000',
  //     percentage: '24.39',
  //   },
  //   {
  //     name: '特旱',
  //     value: '100',
  //     percentage: '2.44',
  //   },
  // ]
  const propsCopy = reactive({
    data: cloneDeep(props.data),
  })
  const option = ref({
    color: ['#4CE600', '#FFFFBD', '#ECEC1B', '#FFA77F', '#FD0100'],
    // title: {
    //   text: 'XXX干旱指数面积统计(VCI)',
    //   left: 'center',
    //   top: 20,
    // },
    tooltip: {
      trigger: 'item',
      axisPointer: {
        type: 'shadow',
        label: {
          show: true,
        },
      },
      formatter: function (params) {
        // 保留原有的 tooltip 样式，插入百分号并返回格式化后的 tooltip 内容
        var tooltipText =
          params.marker + params.name + ': ' + params.value + '%'
        return tooltipText
      },
    },
    legend: {
      orient: 'vertical',
      left: '73%',
      top: '15%',
      textStyle: {
        color: '#ffffff',
        fontSize: 12,
      },
      formatter: (name) => {
        // let target
        // echartLegendData.forEach((item, index) => {
        //   if (name == item.name) {
        //     target = item
        //   }
        // })
        // return `${name}    ${target.value}Km²      ${target.percentage}%`
        return `${name}`
      },
    },
    series: [
      {
        name: '隐患类型',
        type: 'pie',
        center: ['50%', '50%'],
        radius: ['40%', '70%'],
        right: '35%',
        itemStyle: {
          borderRadius: 5,
          // borderColor: '#fff',
          // borderWidth: 2,
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
        label: {
          show: true,
          formatter: '{c}%',
          textStyle: {
            fontSize: 16,
            color: '#fff',
          },
        },
        labelLine: {
          // show: false,
        },
        data: props.data,
      },
    ],
  })

  function _clearInterval(timeId) {
    timeId && window.clearInterval(timeId)
  }
  const resizeHandler = () => {
    myChart.resize()
  }
  const chart = ref()
  const timer1 = ref(null)
  const initCharts = () => {
    chart.value.removeAttribute('_echarts_instance_')
    myChart = echarts.init(chart.value)
    myChart.setOption(option.value)
    window.addEventListener('resize', resizeHandler)
  }
  watch(
    () => props,
    (newValue, oldValue) => {
      propsCopy.data = cloneDeep(newValue.data)
      myChart.setOption({
        series: [
          {
            data: propsCopy.data,
          },
        ],
      })
    },
    { deep: true }
  )
  onMounted(() => {
    initCharts()
  })
  onBeforeUnmount(() => {
    window.removeEventListener('resize', resizeHandler)
  })
  defineExpose({
    initCharts,
    props,
  })
  </script>
  <style scoped lang="scss">
  .chart-render-box {
    width: 100%;
    height: 100%;
    flex: 1;
  }
  </style>
